<template>
  <!--备机发放页面-->
  <div>
    <el-form :inline="true" :model="searchDto" ref="searchForm">
      <el-form-item prop="province">
        <v-distpicker @selected="OnProvinceSelected" :provinceOut="searchDto.province" only-province>
        </v-distpicker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
      </el-form-item>
    </el-form>
    <custom-table
      :data="grantList"
      :columns="columns"
      :tableLoadingFlag="tableLoadingFlag"
      :operationColumn="operationColumn"
      :pagination="pagination">
    </custom-table>
  </div>
</template>

<script>
  import CustomTable from '@/components/table/CustomTable'
  import {apiGetGrantList} from '@/api/standby/index'
  import {apiGetSpareDistributeList} from '@/api/config/audit'
  import {getUserId} from '@/utils/token'

  export default {
    components: {
      CustomTable
    },
    created () {
      let listQuery = {
        pageNumber: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }
      this.getGrantList(listQuery)
      this.initAutoList()
    },
    data () {
      return {
        tableLoadingFlag: false,          // 发放列表
        columns: [
          {label: 'ID', name: 'id', width: '80', align: 'center'},
          {label: '申请单号', name: 'applicationNo', width: '150', align: 'center'},
          {label: '申请人', name: 'proposer', width: '100', align: 'center'},
          {label: '省份', name: 'province', align: 'center'},
          {label: '产品名称', name: 'itemName', align: 'center'},
          {label: '型号', name: 'modelName', align: 'center'},
          {label: '状态', name: 'applicationStatus', width: '100', align: 'center'},
          {label: '申请数量', name: 'num', width: '100', align: 'center'},
          {label: '欠单数量', name: 'accommodationNum', width: '100', align: 'center'}
        ],
        grantList: [],
        operationColumn: null,
        pagination: this.getData(this.getGrantList),
        listQuery: {
          provinceCode: undefined
        },
        searchDto: {
          province: ''
        }
      }
    },
    methods: {
      getGrantList (listQuery) {
        this.tableLoadingFlag = true
        if (listQuery.provinceCode === undefined) {
          listQuery.provinceCode = this.searchDto.province
        }
        apiGetGrantList(listQuery).then(response => {
          this.grantList = response.data
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      onBtnGrant (row) {
        // 跳转到分发界面
        this.$router.push({
          path: '/standby/grant',
          query: {
            id: row.id,
            applicationNum: row.num,
            status: row.applicationStatus,
            accommodationNum: row.accommodationNum,
            mName: row.modelName,
            provinceCode: row.provinceCode
          }
        })
      },
      OnProvinceSelected (data) {
        this.searchDto.province = data.province.code
      },
      searchData () {
        this.listQuery.provinceCode = this.searchDto.province
        this.pagination.currentPage = 1
        this.pagination.pageSize = 10
        this.getGrantList(this.listQuery)
      },
      initAutoList () {
        let userIdStr = getUserId()
        let userId = parseInt(userIdStr)
        apiGetSpareDistributeList().then(rsp => {
          let distributeFlag = false
          for (let i in rsp.data) {
            if (userId === rsp.data[i]) {
              distributeFlag = true
            }
          }
          if (distributeFlag === true) {
            this.operationColumn = {
              width: '80',
              operations: [{name: '发放', callback: this.onBtnGrant, page: 'grants'}]
            }
          } else {
            this.operationColumn = null
          }
        })
      }
    }
  }
</script>
